<template>
    <BCarousel class="carousel-dark border rounded" controls ride="true" v-if="images.length > 0">
        <BCarouselSlide v-for="image in images" :img-src="image.src" />
    </BCarousel>
</template>

<script>
export default {
    name: "ImageSlider",
    data() {
        return {
            activeSlideIndex: 0,
            slideCount: 0
        }
    },
    props: {
        images: {
            type: Array,
            required: true
        }
    },
    methods: {
        onNext() {
            if (this.activeSlideIndex >= this.slideCount - 1) {
                this.activeSlideIndex = 0;
            }
            else {
                this.activeSlideIndex++;
            }
        },
        onPrev() {
            if (this.activeSlideIndex <= 0) {
                this.activeSlideIndex = this.slideCount - 1;
            }
            else {
                this.activeSlideIndex--;
            }
        },
        isActive(imageId) {
            if (imageId == this.images[this.activeSlideIndex].projectImageId) {
                return true;
            }
            return false;
        }
    },
    created() {
        this.slideCount = Object.keys(this.images).length;
    }
}
</script>

<style lang="css" scoped>
</style>